// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'



// 引入css文件
import "./index.css"

//children 属性
// 可以使JSX 或者组件,或者函数
// children属性: 表示组件标签的子节点 当组件标签有子节点是 props就有该属性
// children属性与普通的props一样,值可以是任意值(文本,JSX,组件,函数)


const Button = () => <button>我是button组件</button>

const App = props => {
    console.log(props.children())
    return (
        <div>
            <h2>组件标签的子节点</h2>
            {/* {props.children} */}
        </div>
    )
}


//3 渲染react元素
ReactDOM.render(
    // <App />,
    // <App>我是子节点</App>,
    // <App><Button /></App>,
    <App>{() => { console.log('这是一个子节点函数') }}</App>,
    document.getElementById('root'))



    // const App = props => {
    //     console.log(props)
    //     return (
    //         <div>
    //             <h2>组件标签的子节点</h2>
    //         </div>
    //     )
    // }


    // //3 渲染react元素
    // ReactDOM.render(
    //     // <App />,
    //     <App>我是子节点</App>,
    //     document.getElementById('root'))